<template>
    <div class="px">
        <el-card>
            <div slot="header" class="clearfix">
                <span style="color: #066cac">
                    <i class="el-icon-document-add"></i>
                    考生在线报名 Candidates Register Online
                </span>
                <el-button type="primary"
                           size="mini"
                           icon="el-icon-arrow-left"
                           @click="$router.go(-1)"
                           style="float: right;">返回
                </el-button>
            </div>
            <div>
                <!--搜索-->
                <el-row>
                    <el-col :span="24">
                        <div class="search">
                            <el-form :inline="true" :model="searchData" @keydown.enter.native="onSearch">
                                <el-form-item class="text" label="编号">
                                    <el-input
                                            placeholder="请输入考试编号"
                                            v-model="searchData.id"
                                            size="small"
                                            clearable>
                                    </el-input>
                                </el-form-item>
                                <el-form-item class="text" label="名称">
                                    <el-input
                                            placeholder="请输入考试名称"
                                            v-model="searchData.examName"
                                            size="small"
                                            clearable>
                                    </el-input>
                                </el-form-item>
                                <el-form-item class="text" label="科目">
                                    <el-select v-model="searchData.examSubject"
                                               placeholder="请选择考试科目"
                                               size="small"
                                               clearable
                                    >
                                        <el-option
                                                v-for="item in examSubject"
                                                :key="item.id"
                                                :label="item.subject"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item class="text" label="考场">
                                    <el-input
                                            placeholder="请输入考试位置"
                                            v-model="searchData.examLocation"
                                            size="small"
                                            clearable>
                                    </el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button icon="el-icon-search" size="mini" type="primary" @click="onSearch">搜索
                                    </el-button>
                                    <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-for="(item) in tableData" :key="item.id">

                        <myTab>
                            <template slot="head">
                                <div class="tab-p">
                                    <h3>{{item.examName}}</h3>
                                    <p>考试编号：{{item.id}}</p>
                                    <p>参考人数：{{item.examJoinNum}}</p>
                                    <p>开始时间： {{ item.examBeginTime }}</p>
                                    <p>结束时间：{{ item.examOverTime }}</p>
                                    <p>考试时长：{{(new Date(item.examOverTime).getTime()-new
                                        Date(item.examBeginTime).getTime())/60000+'分钟' }}
                                    </p>
                                </div>
                            </template>
                            <template slot="foot">
                                <div style="text-align: right;line-height: 70px;padding-right: 15px;">
                                    <el-button
                                            :disabled="item.examState===1||item.examState===3||item.examState===4"
                                            size="small"
                                            type="primary"
                                            icon="el-icon-edit"
                                            @click="registrationForm(item.id)">立即报名
                                    </el-button>
                                </div>
                            </template>
                        </myTab>
                    </el-col>
                    <el-col :span="24" v-if="tableData.length<=0">
                        <el-empty description="无数据"></el-empty>
                    </el-col>
                    <el-col :span="24">
                        <div style="margin: 10px;text-align: center;">
                            <el-pagination
                                    :pager-count="11"
                                    :page-sizes="[9,18,27,36, 45, 54, 63]"
                                    :page-size="pageSize"
                                    :current-page="currentPage"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    layout="total, prev, pager, next,jumper"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script>
    import {examInfo} from "../../../../api/examination";
    import {queryByTypeCode} from "../../../../api/dictionary";
    import myTab from "../../../../components/myTab"
    import {subjectDict} from "../../../../api/dictionary";

    export default {
        data() {
            return {
                searchData: {
                    id: "",
                    examName: "",
                    examSubject: "",
                    examLocation: "",
                },
                total: 0,//总页数
                currentPage: 1,//当前页面
                pageSize: 9,//每页大小
                tableData: [],
                examSubject: [],
                examState: [],
                timer: null,

            }
        },
        components: {myTab},
        mounted() {
            this.initDict();
            this.getList();
            this.timer = setInterval(this.getList, 1000);
        },
        beforeDestroy() {
            clearInterval(this.timer)
        },
        methods: {
            //搜索
            async onSearch() {
                this.getList()
            },
            //搜索重置
            onReset() {
                this.searchData = {
                    id: "",
                    examName: "",
                    examSubject: "",
                    examLocation: "",
                };
                this.refresh()
            },
            refresh() {
                this.getList()
            },
            async getList() {
                let resp = await examInfo(this.searchData, this.currentPage, this.pageSize);
                this.total = resp.data.total;
                this.tableData = resp.data.list;
            },
            async initDict() {
                let resp = await subjectDict()
                this.examSubject = resp.data
                resp = await queryByTypeCode("exam_state")
                this.examState = resp.data
            },
            //页数改变
            handleSizeChange(val) {
                this.pageSize = val
                this.refresh();
            },
            //翻页
            handleCurrentChange(val) {
                this.currentPage = val
                this.refresh();
            },
            // 报名表单
            registrationForm(id) {

                this.$router.push({
                    path: "/ei/registrationForm",
                    query: {
                        id
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .tab-p {
        p {
            font-size: 12px;
        }
    }
</style>